<template>
	<view>
		<u-navbar title="创作" title-color="#fff" back-icon-color="#fff" :immersive="false"
			:background="background"></u-navbar>
		<video :src="videoUrl" object-fit="contain" style="width: 100%;height:70vh;margin-top: 40rpx;"></video>
		<view class="bottom flex-row justify-center">
			<view @click="downloadVideo" class="bottom-btn">
				下载视频
			</view>
		</view>
		<!-- 下载视频进度条弹窗 -->
		<progressPop ref="progressPop" :isShow="false" :percent="percent" @cancel="showProgressCancel"></progressPop>
	</view>
</template>

<script>
	import progressPop from "../../components/progressPop/index.vue";
	export default {
		components: {
			progressPop
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				videoUrl: '',
				percent: 0,
				downloadTask: null, //上传视频任务
			}
		},
		onLoad(options) {
			this.videoUrl = options.url;
			if(!uni.getStorageSync("userId")){
				uni.hideShareMenu({
				  menus: ['shareAppMessage']
				})
			}else {
				uni.showShareMenu({
				  withShareTicket: true,
				  menus: ['shareAppMessage']
				})
			}
			if(JSON.stringify(options) != '{}' && options.id){
				console.log('走了么')
				uni.setStorageSync("parentId",options.id)
			}
		},
		onShareAppMessage: function (res) {
			let userId = uni.getStorageSync("userId") ? uni.getStorageSync("userId") : ''
			return {  
			      title: '创作', // 分享标题  
			      path: '/pagesHome/videoDetail/index?id=' + userId, // 分享路径，可以带参数  
			      success: function (res) {  
			        // 设置成功  
			      },  
			      fail: function (res) {  
			        // 设置失败  
			      }  
			    } 
		},
		// onShareTimeline(){},//分享朋友圈
		methods: {
			showProgressCancel() {
				this.$refs.progressPop.close();
				
			},
			// 下载视频
			downloadVideo() {
				this.$isAuthorize('scope.writePhotosAlbum',{title: '保存视频权限',content: '为了将视频保存到您的相册，我们需要获取相应的存储权限。请允许我们访问您的存储，以便我们能够正确保存视频。'}).then(res=> {
					console.log(res,'授权')
					if(res == true){
						// 已授权
						console.log('已授权')
						// recorderManager.start();
						this.downloadVideoAuthSuccess()
					}else {
						// 未授权打开授权
						console.log('未授权')
					}
				})
				
			},
			// 下载视频
			downloadVideoAuthSuccess() {
				var _this = this;
				uni.showLoading({
					title: '下载中'
				})
				_this.downloadTask = uni.downloadFile({
					url: this.videoUrl,
					success: function(res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						console.log(res, 'reeeeee')
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading()
								uni.showToast({
									title: "保存成功",
									duration: 2000,
								})
								setTimeout(() => {
									_this.$refs.progressPop.close();
									_this.percent = 0;
								}, 1000)
							},
							fail() {
								uni.showToast({
									title: "保存失败",
									icon: 'none',
									duration: 2000,
								})
								_this.$refs.progressPop.close();
								_this.percent = 0;
							}
						})
					},
					fail: function(err) {
						uni.hideLoading();
						console.log(err, 'errr')
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						})
						_this.$refs.progressPop.close();
					}
				})
				_this.downloadTask.onProgressUpdate((res) => {
					
					if (res.progress > 0) {
						uni.hideLoading();
						_this.$refs.progressPop.open();
					}
					_this.percent = res.progress;
					if (_this.percent >= 100) {
						
						// setTimeout(() => {
						// 	_this.$refs.progressPop.close();
						// 	_this.percent = 0;
						// }, 1000)
					
					
					}
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);

	page {
		background-color: #0e0f12;
	}

	.bottom {
		position: fixed;
		bottom: 80rpx;
		left: 0;
		width: 100%;
	}

	.bottom-btn {
		width: 480rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;

	}
</style>